import React from 'react'
import ReactDOM from 'react-dom'
import Tabs from 'react-simpletabs'


import * as NewsAction  from '../../actions/NewsAction';
import { connect }  from 'react-redux';

import NewsPushTools from './NewsPushTools'
import NewsPushList from './NewsPushList'
import NewsPushEdit from './NewsPushEdit'

import AssetMultiSelect from '../AssetMultiSelect'
import _ from 'lodash'

import Paging from '../Paging'

class NewsPushBody extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      currentType: '小区公告'
    }

  }

  componentDidMount() {
    this.$assetModal = $(ReactDOM.findDOMNode(this.refs.AssetMultiSelect))
    this.props.dispatch(
      NewsAction.loadNewsHandlerAsync({
      })
    )
    this.props.dispatch(
      NewsAction.loadThisMonthHandlerAsync({})
    )
  }

  componentDidUpdate() {
    // console.log(this.props.thisMonth)
  }

  onCreateNewsPushClick(){
    this.setState({
      activeData: {}
    })
    this.$assetModal.modal("show")
  }

  onCreateNewsPushSubmit(data){
    this.$assetModal.modal("hide")

  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      NewsAction.loadNewsHandlerAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit
      })
    )
  }

  onAssetGridSubmit(assets) {

    if (confirm("将推送给所有已关注微信用户，确定要推送吗？")) {
      if (assets.length > 0) {
        if (assets.length > 1) {
          //合并多图文
          var news_item = [];
          var count = assets.length >8?8:assets.length
          for (var i = 0; i < count; i++) {
            var asset = assets[i]
            news_item = _.concat(news_item, asset.content.news_item)
          }
          this.props.dispatch(
            NewsAction.createCombineNewsHandlerAsync({
              news_item: news_item
            })
          )
        }
        else {
          this.props.dispatch(
            NewsAction.createSingleNewsHandlerAsync(assets[0])
          )
        }
      }
      this.$assetModal.modal("hide")
    }

  }


  render() {
    var self = this;
    // var data = this.props.data;
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;
    // console.log(data);
    return (

      <div className="content-body billboard-content-body" >
        <NewsPushTools
          thisMonth = {this.props.thisMonth}
          onCreateNewsPushClick = {this.onCreateNewsPushClick.bind(self)}
        />

        <NewsPushList
          type = {this.state.currentType}
          data = {this.props.data}
          />

        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />

        <AssetMultiSelect
          wechat = {this.props.wechat}
          onAssetGridSubmit = {this.onAssetGridSubmit.bind(self)}
          ref="AssetMultiSelect"/>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    news: state.newsPush,
    data: state.newsPush.data,
    offset: state.newsPush.offset,
    limit: state.newsPush.limit,
    count: state.newsPush.count,
    thisMonth: state.newsThisMonth
  }
}

export default  connect(mapStateToProps)(NewsPushBody)
